<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			#box{width: 880px;height: 800px;border: 1px solid gainsboro;}
			.first{float:left;margin-top: 20px;margin-left: 20px;}
			.first a{text-decoration: none;color: black;margin-left: 700px;
			}
			.one .p1{clear:both;list-style:none;float:left;margin-left: 30px;margin-top: 30px;}
			.one .p2{float: left;list-style:none;margin-left: 20px;margin-top: 30px;}
			.two .p3{clear:both;list-style:none;float:left;margin-left: 30px;margin-top: 30px;}
			.two .p4{float: left;list-style:none;margin-left: 20px;margin-top: 30px;}
			.one .p1 li{font-size: 13px;}
			.one .p2 li{font-size: 13px;}
			.two .p3 li{font-size: 13px;}
			.two .p4 li{font-size: 13px;}
		</style>
	</head>
	<body>
		<div id="box">
			<h2 class="first">热门活动 <a href="#">更多</a></h2>
		    <div class="one">
			    <ul class="p1">
			      <li><img src="img/img1.png" alt="" width="360px" height="120px"></li>
				  <li>推荐活动<span> | </span>原创音乐现金榜T榜</li>
			    </ul>
			    <ul class="p2">
			      <li><img src="img/img2.png" alt="" width="360px" height="120px"></li>
				  <li>推荐节目<span> | </span>《TAImusic》爆笑来袭</li>
			    </ul>
		    </div>
		    <div class="two">
			    <ul class="p3">
			      <li><img src="img/img3.png" alt="" width="360px" height="120px"></li>
				  <li>推荐歌单<span> | </span>继续宠爱张国荣</li>
			    </ul>
			    <ul class="p4">
			      <li><img src="img/img4.png" alt="" width="360px" height="120px"></li>
				  <li>推荐活动<span> | </span>330金属音乐巡演 成都小酒馆音乐空间</li>
			    </ul>
		    </div>
		</div>
	</body>
</html>
